<template>
  <div class="demos">

    <div id="clineDiv" style="padding:10px 20px;border:1px solid;">

    </div>

    <van-checkbox-group v-model="result">
      <van-cell-group>
        <van-cell
          v-for="item in list"
          clickable
          :key="item"
          :title="`复选框 ${item}`"
          @click="toggle(index)"
        >
          <van-checkbox :name="item" ref="checkboxes" />
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>




  </div>
</template>
<script>

  // var echarts = require('echarts');
  // 引入 ECharts 主模块
    var echarts = require('echarts/lib/echarts');
   //引入饼图
  require('echarts/lib/chart/pie');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

  // Vue.use(ceshi);
  export default {
    name: 'demo',
    data() {
      return {
        list: ['a','b','c','d',],
        result: [],
        grids: [0, 1, 2, 3, 4, 5, 6, 7, 8],
      }
    },
    methods : {
      toggle(index) {
        console.log(this.$refs.checkboxes[index])
        this.$refs.checkboxes[index].toggle();
      }
    },
    mounted(){

    }
  }
</script>
<style>
  .btnsss{
    position: fixed;
    left:20px;
    bottom:100px;
    width:50px;
    height:50px;
    background:rgba(0,0,0,.5);
  }
  .xuanfu {
    height: 4.5rem;
    width: 4.5rem;
    z-index: 990;
    position: fixed;
    top: 4.2rem;
    right: 3.2rem;
    border-radius: 0.8rem;
    background-color: rgba(0, 0, 0, 0.55);
  }
  .yuanqiu {
    height: 2.7rem;
    width: 2.7rem;
    border: 0.3rem solid rgba(140, 136, 136, 0.5);
    margin: 0.65rem auto;
    color: #000000;
    font-size: 1.6rem;
    line-height: 2.7rem;
    text-align: center;
    border-radius: 100%;
    background-color: #ffffff;
  }
</style>



